<template>
  <div style="width: 100%; height: 100%">
    <div class="header">
      <div>预警信息（{{ tableData.tableList.length }}条）</div>
      <div class="tabbar">
        <div
          v-for="(item, index) in tabs"
          :key="index"
          class="tabs"
          :class="current == index ? 'tabsCurrent' : ''"
          @click="tabsClick(index)">
          {{ item }}
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content_tabs">
        <div
          v-for="(item, index) in rightTabs"
          :key="index"
          :class="contentCurrent == index ? 'content_tabsCurrent' : ''"
          class="content_tabsItem"
          @click="contentCurrentClick(index)">
          {{ item }}
        </div>
      </div>
      <div class="content_table">
        <base-table
          :height="'100%'"
          :loading="tableData.loading"
          :data="tableData.tableList"
          :columns="tableData.columns"
          :has-auth="tableData.hasAuth"
          :show-operation="false"
          :show-index="false" />
      </div>
    </div>
  </div>
</template>
<script>
import { getEarlyWarning } from '@/api/cms/Inspection-management/Inspection-plan-management/InspectionPlanManagementIndex'
export default {
  props: {
    conditionFind: {
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => {
        return {}
      },
      type: Object
    }
  },
  data() {
    const that = this
    return {
      tabs: ['近七天', '近三天', '当日'],
      current: 0,
      rightTabs: ['1c', '2c', '4c'],
      earlyWarningCycleList: [7, 3, 1],
      earlyWarningCycle: '7',
      contentCurrent: 0,
      list: [],
      // 表格数组
      tableData: {
        loading: false,
        tableList: [],
        total: 0,
        columns: [
          { prop: 'deptName', label: '单位' },
          { prop: 'planDate', label: '计划检测日期', formatter: (row) => that.formatDate(row, '{y}') },
          { prop: 'seclineName', label: '线路' },
          { prop: 'directionName', label: '行别' },
          { prop: 'planBegin', label: '计划起站' },
          { prop: 'planEnd', label: '计划止站' },
          { prop: 'distanceDays', label: '距离天数' }
        ],
        showSelection: false,
        showOperation: true,
        showFilterColumn: true,
        defaultOperations: [],
        hasAuth: true,
        rowShowColor: { name: 'name', value: 0 }
      }
    }
  },
  computed: {
    listName() {
      return this.contentCurrent === 0
        ? 'list_1C'
        : this.contentCurrent === 1
          ? 'list_2C'
          : 'list_4C'
    }
  },
  watch: {
    conditionFind: {
      handler: function(newQuestion, oldQuestion) {
        this.init()
      },
      deep: true,
      immediate: true
    },
    earlyWarningCycle() {
      console.log(this.earlyWarningCycle)
      this.init()
    }
  },
  methods: {
    formatDate(row, column) {
      const date = new Date(parseInt(row.planDate))
      const Y = date.getFullYear() + '-'
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
      const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      // let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
      // let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
      // let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      // return Y + M + D + h + m + s;
      return Y + M + D
    },
    init() {
      const obj = this.conditionFind
      obj.earlyWarningCycle = this.earlyWarningCycle
      getEarlyWarning(obj).then((res) => {
        this.list = res.data

        this.tableData.tableList = this.list[this.listName]
      })
    },
    tabsClick(index) {
      this.current = index
      this.earlyWarningCycle = this.earlyWarningCycleList[index]
    },
    contentCurrentClick(index) {
      this.contentCurrent = index
      this.tableData.tableList = this.list[this.listName]
    }
  }
}
</script>
<style  scoped>
.header {
  height: 50px;
  padding: 0 20px;
  line-height: 50px;
  font-size: 18px;
  font-weight: 400;
  color: #061b48;
  display: flex;
  justify-content: space-between;
}
.tabbar {
  display: flex;
  align-items: center;
}
.tabs {
  width: 62px;
  height: 36px;
  background: rgba(255, 255, 255, 0.6000000238418579);
  opacity: 1;
  border: 1px solid #dee6f1;
  font-size: 14px;
  font-family: Noto Sans SC-Regular, Noto Sans SC;
  font-weight: 400;
  color: #737d8a;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.tabsCurrent {
  border: 1px solid #409eff;

  color: #409eff;
}
.content {
  height: calc(100% - 50px);
  width: 100%;
  display: flex;
}
.content_tabs {
  width: 77px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content_table {
  width: calc(100% - 77px);
  height: 100%;
}
.content_tabsItem {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Noto Sans SC-Regular, Noto Sans SC;
  font-weight: 400;
  color: #737d8a;
  background: rgba(255, 255, 255, 0.6000000238418579);
  opacity: 1;
  border: 1px solid #dee6f1;
  cursor: pointer;
}
.content_tabsCurrent {
  border: 1px solid #409eff;
}
</style>
